<script setup>
import { ref } from 'vue'

const props = defineProps({
  announcement: {
    type: Object,
    default: () => ({
      title: '',
      content: '',
      site: ''
    })
  },
  availableSites: {
    type: Array,
    default: () => []
  },
  isEdit: {
    type: Boolean,
    default: false
  }
})

const formData = ref({
  title: props.announcement.title,
  content: props.announcement.content,
  site: props.announcement.site
})

const emit = defineEmits(['submit', 'cancel'])

const handleSubmit = () => {
  if (!formData.value.title || !formData.value.content || !formData.value.site) {
    alert('请填写完整信息')
    return
  }
  emit('submit', { ...formData.value })
}

const handleCancel = () => {
  emit('cancel')
}
</script>

<template>
  <div class="announcement-form">
    <h2>{{ isEdit ? '编辑公告' : '发布公告' }}</h2>
    
    <div class="form-content">
      <div class="form-item">
        <label>标题：</label>
        <input 
          type="text" 
          v-model="formData.title" 
          placeholder="请输入公告标题"
        >
      </div>
      
      <div class="form-item">
        <label>内容：</label>
        <textarea 
          v-model="formData.content" 
          placeholder="请输入公告内容"
          rows="6"
        ></textarea>
      </div>
      
      <div class="form-item" v-if="availableSites.length > 0">
        <label>发布站点：</label>
        <select v-model="formData.site">
          <option value="">请选择站点</option>
          <option 
            v-for="site in availableSites" 
            :key="site" 
            :value="site"
          >
            {{ site }}
          </option>
        </select>
      </div>
      
      <div class="form-actions">
        <button @click="handleSubmit" class="submit-btn">{{ isEdit ? '保存' : '发布' }}</button>
        <button @click="handleCancel" class="cancel-btn">取消</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.announcement-form {
  max-width: 800px;
  margin: 84px auto 20px;
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 24px;
  color: #1e2022;
  font-size: 20px;
  font-weight: 600;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item label {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
}

.form-item input,
.form-item select,
.form-item textarea {
  padding: 8px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  color: #1e2022;
  transition: all 0.2s ease;
}

.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {
  outline: none;
  border-color: #0052cc;
  box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.1);
}

.form-item textarea {
  resize: vertical;
  min-height: 120px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
}

.submit-btn,
.cancel-btn {
  padding: 8px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.submit-btn {
  background-color: #0052cc;
  color: white;
}

.submit-btn:hover {
  background-color: #0747a6;
}

.cancel-btn {
  background-color: #f8f9fa;
  color: #6c757d;
  border: 1px solid #e8e8e8;
}

.cancel-btn:hover {
  background-color: #e9ecef;
  color: #0052cc;
  border-color: #0052cc;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #666;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}
</style>
